<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>csharp code viewer</title>
    <link rel="icon" type="image/svg+xml" href="/image/csharp.svg">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
</head>
<body>
    <!-- 代码窗口 -->
    <div class="code-window">
        <!-- 标题栏 -->
        <div class="title-bar">
            <div class="buttons">
                <span class="close"></span>
                <span class="minimize"></span>
                <span class="maximize"></span>
            </div>
        </div>

        <!-- 代码显示区域 -->
        <div id="code-container" contenteditable="true">在这里粘贴你的代码...</div>
    </div>

    <!-- 控制区域 -->
    <div id="controls">
        <label for="speed">速度（毫秒/字符）：</label>
        <input type="number" id="speed" value="20" min="1" max="100">
        <button onclick="startTyping()">写代码（X）</button>
        <button onclick="startRecording()" id="recordButton">录个屏（L）</button>
        <button onclick="stopRecording()" id="downloadButton" disabled>不录了（B）</button>
        <button onclick="captureScreenshot()">截个图（J）</button>
    </div>

    <script>

        let lastKeyPressTime = 0;
        let keySequence = '';

        document.addEventListener('keydown', (event) => {
            const currentTime = new Date().getTime();

            // 如果两次按键间隔超过 500ms，重置按键序列
            if (currentTime - lastKeyPressTime > 500) {
                keySequence = '';
            }

            keySequence += event.key;
            lastKeyPressTime = currentTime;

            // 检测快捷键
            if (keySequence === 'x') {
                startTyping(); // 开始打字动画
                keySequence = '';
            } else if (keySequence === 'l') {
                startRecording(); // 开始录屏
                keySequence = '';
            } else if (keySequence === 'b') {
                stopRecording(); // 停止录屏
                keySequence = '';
            } else if (keySequence === 'j') {
                captureScreenshot(); // 截图
                keySequence = '';
            }
        }); 

    </script>
    
    <script src="/js/code.js"></script>
    <script src="/js/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="/js/image.js"></script>
</body>
</html>